<template>
  <div class="register-container">
    <div class="login-title">
        XXXX数字化评审应用系统
    </div>
    <div class="register-card">
      <div slot="header" class="clearfix" style="text-align: center;color: #2251F8;font-size: 24px">
        管理端
      </div>
      <el-form ref="loginForm" size="large" :rules="loginRules" :model="loginData" label-position="top" label-width="0px">
        <el-form-item prop="username" label="账号">
          <el-input v-model="loginData.username" prefix-icon="el-icon-user" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input
            v-model="loginData.password"
            prefix-icon="el-icon-lock"
            type="password"
            placeholder="请输入密码"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="isLoading"
            :disabled="isLoading"
            style="width: 100%"
            type="primary"

            @click="login"
          >
            {{ isLoading ? '登录中' : '登录' }}
          </el-button>
          <!-- <el-button
            style="width: 100%;margin: 11px auto"
            type="primary"

            @click="$router.push('/enterSelf')"
          >
            企业端注册
          </el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Login',
  data() {
    return {
      isLoading: false,
      loginData: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },

  methods: {
    login() {
      this.$refs.loginForm.validate(async isPassed => {
        if (isPassed) {
          this.isLoading = true
          this.$store.dispatch('user/login', { ...this.loginData }).then(res => {
            this.$router.replace('/home')
          }).catch(() => {
              console.log('报错了】')
            this.isLoading = false
          })
        }
      })
    },
    reset() {
      this.loginData.username = ''
      this.loginData.password = ''
    }
  }
}
</script>

<style lang="scss">
.register-container {
    width: 100%;
    height: 100%;
    background: url("~@/assets/login-bg.png") no-repeat;
    background-size: cover;
    .login-title {
        position: absolute;
        left: 0;
        top: 43px;
        width: 100%;
        font-size: 56px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #FFFFFF;
        line-height: 70px;
        text-align: center;
    }
    .register-card {
        width: 30%;
        background: #FFFFFF;
        border-radius: 40px;
        position: absolute;
        top: 50%;
        right: 80px;
        transform: translateY(-50%);
        padding: 30px 50px;
    }
    .el-form-item__label {
        color: #727888;
    }
    .el-input__inner {
        border: none;
        box-shadow: 0px -4px 10px 0px rgba(171,179,218,0.1), 0px 4px 10px 0px rgba(171,179,218,0.1);
    }
    .el-button {
        background: #F9703A;
        box-shadow: 0px -6px 14px 0px rgba(249,112,58,0.32), 0px 6px 14px 0px rgba(249,112,58,0.31);
        border-radius: 11px;
        border: none;
        padding-top: 16px;
        padding-bottom: 16px;
        font-size: 16px;
    }
}
</style>
